import 'package:amway_superapp_creator_plugin/config/colors_config.dart';
import 'package:amway_superapp_creator_plugin/models/create_user_info_model.dart';
import 'package:amway_superapp_creator_plugin/routers/application.dart';
import 'package:amway_superapp_creator_plugin/viewmodels/circle/official_circle_model.dart';
import 'package:amway_superapp_creator_plugin/widget/back_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_screenutil/screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:page_view_indicators/circle_page_indicator.dart';
import 'package:provider/provider.dart';

import '../base_view.dart';
import 'package:amway_superapp_creator_plugin/models/search_info_bean.dart';
import 'package:amway_superapp_creator_plugin/utils/time_util.dart';
import 'package:amway_superapp_creator_plugin/utils/oss_util.dart';

class OfficialCircleDetail extends StatefulWidget {
  var dataHtml;
  String time;
  String title;
  List<String> officialId;
  List<ImagesBean> images;

  OfficialCircleDetail(
      {@required this.dataHtml,
      this.time,
      this.title,
      this.officialId,
      this.images});

  @override
  _OfficialCircleDetailState createState() => _OfficialCircleDetailState();
}

class _OfficialCircleDetailState extends State<OfficialCircleDetail> {
  @override
  Widget build(BuildContext context) {
    return BaseView(
        model: OfficialCircleModel(api: Provider.of(context)),
        onModelReady: (model) async {
          if (widget.officialId != null) {
            model.getShopList(SearchInfoBean(skuCodes: widget.officialId));
          }
        },
        builder: ((context, model, child) => Scaffold(
              appBar: AppBar(
                brightness: Brightness.light,
                elevation: 0,
                backgroundColor: Colors.white,
                leading: BackButtion(
                  onTap: () => Application.router.pop(context),
                ),
                title: Text(
                  '我的圈子',
                  style: TextStyle(
                    color: ColorsConfig.c_2c2c2c,
                    fontSize: ScreenUtil().setSp(19.88),
                  ),
                ),
              ),
              body: Container(
                color: Colors.white,
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      _buildImagesView(context),
                      _buildCircleTitle(context, widget.title),
                      _buildHtml(),
                      _buildTextDate(context, widget.time),
                      _shop(model, context)
                    ],
                  ),
                ),
              ),
            )));
  }

  int curIndex = 1;

  Widget _buildHtml() {
    return widget.dataHtml == "" || widget.dataHtml == null
        ? Container(
            height: 0,
          )
        : Html(
            data: widget.dataHtml,
          );
  }

  Widget _buildImagesView(BuildContext context) {
    return widget.images == null && widget.images.length == 0
        ? Container(
            height: 0,
          )
        : Container(
            width: double.infinity,
            child: Column(
              children: [
                Container(
                  height: ScreenUtil().setHeight(552),
                  color: Colors.black,
                  child: Stack(
                    children: [
                      widget.images != null && widget.images.length > 0
                          ? Swiper(
                              onIndexChanged: (index) {
                                setState(() {
                                  curIndex = index + 1;
                                  _currentPageNotifier.value = index;
                                });
                              },
                              itemBuilder: (BuildContext context, int index) {
                                return Stack(
                                  fit: StackFit.expand,
                                  children: [
                                    Image.network(
                                      widget.images[index].data,
                                    ),
                                  ],
                                );
                              },
                              itemCount: widget.images.length,
                              loop: widget.images.length > 1 ? true : false,
                            )
                          : Image.network(
                              "http://via.placeholder.com/414x552",
                              fit: BoxFit.fill,
                            ),
                      widget.images != null && widget.images.length > 1
                          ? Align(
                              alignment: Alignment.bottomRight,
                              child: Container(
                                padding: EdgeInsets.only(
                                    right: ScreenUtil().setWidth(10),
                                    bottom: ScreenUtil().setHeight(10)),
                                child: Text(
                                  "$curIndex/${widget.images.length}",
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: ScreenUtil().setSp(12)),
                                ),
                              ),
                            )
                          : Container()
                    ],
                  ),
                ),
                _buildPageViewIndicator(context),
              ],
            ),
          );
  }

  final _currentPageNotifier = ValueNotifier<int>(0);

  //指示器
  Widget _buildPageViewIndicator(BuildContext context) {
    return widget.images != null && widget.images.length > 1
        ? Container(
            width: double.infinity,
            padding: EdgeInsets.only(
                top: ScreenUtil().setHeight(12),
                bottom: ScreenUtil().setHeight(12)),
            child: CirclePageIndicator(
              currentPageNotifier: _currentPageNotifier,
              itemCount: widget.images.length,
            ))
        : Container();
  }

  Widget _buildCircleTitle(BuildContext context, String title) {
    return title == null || title == ""
        ? Container(
            height: 0,
          )
        : Container(
            width: double.infinity,
            padding: EdgeInsets.only(
                left: ScreenUtil().setWidth(16),
                right: ScreenUtil().setWidth(16),
                top: ScreenUtil().setHeight(18),
                bottom: ScreenUtil().setHeight(24)),
            child: Container(
                width: double.infinity,
                child: Text(
                  title != null ? "$title" : "",
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: Colors.black, fontSize: ScreenUtil().setSp(22)),
                )),
          );
  }

  Widget _buildTextDate(BuildContext context, String time) {
    return time == null || time == ""
        ? Container(
            width: 0,
            height: 0,
          )
        : Container(
            alignment: Alignment.topLeft,
            padding: EdgeInsets.only(
                left: ScreenUtil().setWidth(16),
                top: ScreenUtil().setHeight(18),
                bottom: ScreenUtil().setHeight(20)),
            child: Text(
              time != null ? TimeUtil.formatDate(time) : "",
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(14),
                  color: ColorsConfig.c_802c2c2c),
            ),
          );
  }

  Widget _shop(OfficialCircleModel provide, BuildContext context) {
    if (provide.officialData != null &&
        provide.officialData.content != null &&
        provide.officialData.content.length > 0) {
      return Container(
        margin: EdgeInsets.only(
            left: ScreenUtil().setWidth(15),
            right: ScreenUtil().setWidth(15),
            bottom: ScreenUtil().setWidth(20)),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                  color: ColorsConfig.c_1a000000,
                  offset: Offset(0.0, 0.0), //阴影xy轴偏移量
                  blurRadius: 21.0, //阴影模糊程度
                  spreadRadius: 0.0 //阴影扩散程度
                  )
            ]),
        child: ListView.builder(
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          //自适应高度
          padding: EdgeInsets.only(
              left: ScreenUtil().setWidth(15),
              right: ScreenUtil().setWidth(15),
              top: ScreenUtil().setWidth(5),
              bottom: ScreenUtil().setWidth(15)),
          itemCount: provide.officialData.content.length,
          itemBuilder: (context, index) {
            return _shopItem(provide, index, context);
          },
        ),
      );
    } else {
      return Container(height: 0, width: 0);
    }
  }

  Widget _shopItem(
      OfficialCircleModel provide, int index, BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 10),
      height: ScreenUtil().setHeight(110),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
              margin: EdgeInsets.only(right: 12),
              child: Image.network(
                provide.officialData.content != null
                    ? "${OssHelper.pictureBaseUrl}${provide.officialData.content[index].picture}"
                    : "",
                width: ScreenUtil().setWidth(80),
                height: ScreenUtil().setWidth(80),
              )),
          Expanded(
              child: Column(
            children: [
              Expanded(
                  child: Container(
                alignment: Alignment.topLeft,
                child: Text(
                    provide.officialData.content != null &&
                            provide.officialData.content[index] != null &&
                            provide.officialData.content[index].productName !=
                                null
                        ? provide.officialData.content[index].productName
                        : "",
                    maxLines: 2,
                    style: TextStyle(
                        fontSize: ScreenUtil().setSp(16),
                        color: ColorsConfig.c_2c2c2c)),
              )),
              Container(
                  child: Row(
                children: [
                  Text("￥",
                      style: TextStyle(
                          color: ColorsConfig.c_cd0000,
                          fontSize: ScreenUtil().setSp(12))),
                  Expanded(
                      child: Text(
                          provide.officialData.content != null &&
                                  provide.officialData.content[index] != null &&
                                  provide.officialData.content[index]
                                          .priceData !=
                                      null &&
                                  provide.officialData.content[index].priceData
                                          .price !=
                                      null
                              ? provide
                                  .officialData.content[index].priceData.price
                                  .toString()
                              : "",
                          style: TextStyle(
                              color: ColorsConfig.c_cd0000,
                              fontSize: ScreenUtil().setSp(16)))),
                ],
              ))
            ],
          )),
        ],
      ),
    );
  }
}
